<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>userList的重写</title>
		<link href="../../../CSS/button_Submit_Reset.css" rel="stylesheet" />
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			/* 函数式编程 */
			$(function() {
				var url = "http://localhost:8090/user/getAll"

				$.post(url, function(data) {

					var str =
						`<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th colspan='2'>操作</th>
				    </tr>`
					$("#d4_t2").html(str);
					var i = 0;

					for (user of data) {
						i++;
						var str =
							`<tr align="center">
					        <td>${user.id}</td>
					        <td class='change'>${user.name}</td>
					        <td class='change'>${user.age}</td>
					        <td class='change'>${user.sex}</td>
					        <td>
					        	<button class='update'>修改</button>
					        </td>
					        <td>
						        <button class='del'>删除</button>
					        </td>
				        </tr>`
						$("#d4_t2").append(str)
					}

				})
				//为动态元素设置事件，其父元素不能是新添加的
				//删除

				$('table').on('click', '.del', function() {
					//获取父级元素tr
					var currentRow = $(this).closest('tr')
					//再用tr获取td里的值
					var id = currentRow.find('td:eq(0)').text()

					var data = `id=${id}`
					var url = "http://localhost:8090/user/delete"
					var confir = confirm("确认删除？")
					if (confir == 1) {
						$.get(url, data, function(data) {
							currentRow.remove();
							console.log("删除成功！")
						})
					} else {
						console.log("未删除！")
					}
				})

				//td的内容 点击"修改"时才有内容
				var id
				var name
				var age
				var sex
				$('table').on('click', '.update', function() {
					//表示判断button上的文本 判断后给str赋值
					var str = ($(this).text() == "修改" ? "确定" : "修改")
					//再将str值赋给button的文本
					$(this).text(str)

					//获取tr
					//closest 注意只会获得一个元素
					//在向上遍历 DOM 树之前，.closest() 方法会从 元素本身开始搜索，直到选择器匹配项目 tr 为止。
					var currentRow = $(this).closest('tr')

					//获取td
					var tdId = currentRow.find('td:eq(0)')
					var tdName = currentRow.find('td:eq(1)')
					var tdAge = currentRow.find('td:eq(2)')
					var tdSex = currentRow.find('td:eq(3)')

					//获取input
					var inpName = tdName.find('input:text')
					// var inpAge = tdAge.find('input:text')
					// var inpSex = tdSex.find('input:text')

					if (!inpName.length) { //如果不存在文本框 将该行对应三个单元格变成文本框
						//首先要保存表格之前文本，以便之后的操作
						id = tdId.text()
						name = tdName.text()
						age = tdAge.text()
						sex = tdSex.text()

						tdName.html("<input type='text' value ='" + name + "'/>")
						tdAge.html("<input type='text' value ='" + age + "'/>")
						tdSex.html("<input type='text' value ='" + sex + "'/>")
					} else {

						var confir = confirm("确认修改？");
						if (confir == 1) {
							//如果存在文本框 变成表格
							tdName.html(inpName.val())
							tdAge.html(inpAge.val())
							tdSex.html(inpSex.val())

							//赋值
							name = tdName.text()
							age = tdAge.text()
							sex = tdSex.text()

							// var data = `id=${id},name=${name},age=${age},sex=${sex}`
							var data = {
								"id": id,
								"name": name,
								"age": age,
								"sex": sex
							}

							var url = "http://localhost:8090/user/update"

							$.post(url, data, function(data) {
								console.log("修改成功！")
							})
						} else {
							//因为第二次点击时 td中没有text文本
							//所以name等变量必须是全局的
							tdName.html(name)
							tdAge.html(age)
							tdSex.html(sex)

							console.log("未修改！")
						}
					}

				})

			})
		</script>


	</head>
	<body>
		<div>
			<table border="1px" align="center" width="80%" id="d4_t1">
				<tr align="center">
					<td colspan="4">
						<h1>用户列表</h1>
					</td>
				</tr>

			</table>
			<table border="1px" align="center" width="80%" id="d4_t2">
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th colspan='2'>操作</th>
				</tr>
			</table>
		</div>
	</body>
</html>
